<template>
    <div class="lyt-wrapper" id="role">
        <div class="lyt-component-lg pb-0">
            <a-form layout="horizontal" :label-col="{ span: 7 }" :wrapper-col="{ span: 17 }">
                <a-row :gutter="10" type="flex">
                    <a-col :xl="6" :lg="8" :sm="12" :xs="24">
                        <a-form-item label="角色名称">
                            <a-input v-model:value="filterData.roleName" />
                        </a-form-item>
                    </a-col>
                    <a-col :xl="6" :lg="8" :sm="12" :xs="24">
                        <a-form-item label="状态">
                            <a-select v-model:value="filterData.roleState" placeholder="请选择">
                                <a-select-option value="true">启用</a-select-option>
                                <a-select-option value="false">停用</a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>
                    <a-col :xl="6" :lg="8" :sm="12" :xs="24">
                        <a-form-item label="创建时间">
                            <a-date-picker
                                v-model:value="filterData.createTime"
                                style="width: 100%;"
                            />
                        </a-form-item>
                    </a-col>
                    <a-col :flex="1">
                        <div class="fr mb-24">
                            <a-button class="mr-10" @click="onGetRoleList">重置</a-button>
                            <a-button type="primary" @click="onGetRoleList">查询</a-button>
                        </div>
                    </a-col>
                </a-row>
            </a-form>
        </div>
        <div class="mt-24 lyt-component-0" id="role-table">
            <a-table
                :loading="roleTableLoading"
                :size="roleTableSize"
                :scroll="{ x: 1200 }"
                :columns="roleColumns"
                :data-source="roleList"
                rowKey="_id"
                bordered
                :pagination="{ total: 3, pageSize: 10 }"
            >
                <template #number="{ index }">{{ index }}</template>
                <template #state="{ record }">
                    <a-switch
                        checked-children="已启用"
                        un-checked-children="已停用"
                        v-model:checked="record.state"
                    />
                </template>
                <template #operation="{ record, index }">
                    <a class="mr-10" @click="onEditRole(record, index)">编辑</a>
                    <a-dropdown :getPopupContainer="getPopupContainer">
                        <a>
                            更多
                            <DownOutlined />
                        </a>
                        <template #overlay>
                            <a-menu>
                                <a-menu-item>
                                    <a href="javascript:;" @click="onAuth(record, index)">授权</a>
                                </a-menu-item>
                                <a-menu-item>
                                    <a href="javascript:;">删除</a>
                                </a-menu-item>
                            </a-menu>
                        </template>
                    </a-dropdown>
                </template>
                <template #title>
                    <a-button type="primary" @click="onNewRole">
                        <template #icon>
                            <PlusOutlined />
                        </template>
                        添加角色
                    </a-button>
                    <span class="table-tool fr">
                        <span class="cursor-pointer mr-12">
                            <a-dropdown :trigger="['click']" :getPopupContainer="getPopupContainer">
                                <a-tooltip>
                                    <template #title>密度</template>
                                    <ColumnHeightOutlined />
                                </a-tooltip>
                                <template #overlay>
                                    <a-menu
                                        selectable
                                        :default-selected-keys="[roleTableSize]"
                                        @click="changeRoleTableSize"
                                    >
                                        <a-menu-item key="default">默认</a-menu-item>
                                        <a-menu-item key="middle">中等</a-menu-item>
                                        <a-menu-item key="small">紧凑</a-menu-item>
                                    </a-menu>
                                </template>
                            </a-dropdown>
                        </span>
                        <span class="cursor-pointer" @click="onChangeFullscreen">
                            <a-tooltip>
                                <template #title v-if="isFullscreen">{{ t('tabs.exitFullScreen') }}</template>
                                <template #title v-else>{{ t('tabs.fullScreen') }}</template>
                                <FullscreenExitOutlined v-if="isFullscreen" />
                                <FullscreenOutlined v-else />
                            </a-tooltip>
                        </span>
                    </span>
                </template>
            </a-table>
            <!-- 添加编辑角色 -->
            <a-drawer
                :getContainer="getPopupContainer"
                :title="roleDrawerTitle"
                placement="right"
                :width="340"
                v-model:visible="roleDrawerVisible"
            >
                <a-form
                    ref="roleFormRef"
                    :model="roleParams"
                    :label-col="{ span: 8 }"
                    :wrapper-col="{ span: 16 }"
                >
                    <a-form-item
                        label="角色名称"
                        name="name"
                        :rules="{ required: true, message: '请输入角色名称', trigger: 'blur' }"
                        required
                    >
                        <a-input v-model:value="roleParams.name" placeholder="请输入" />
                    </a-form-item>
                    <a-form-item label="状态" name="state">
                        <a-switch
                            checked-children="启用"
                            un-checked-children="停用"
                            v-model:checked="roleParams.state"
                        />
                    </a-form-item>
                    <a-form-item label="备注" name="remark">
                        <a-textarea v-model:value="roleParams.remark" />
                    </a-form-item>
                </a-form>
                <div class="ant-drawer-footer">
                    <a-button class="mr-12" @click="roleDrawerVisible = false">取消</a-button>
                    <a-button type="primary" @click="onSaveRole">确定</a-button>
                </div>
            </a-drawer>
        </div>
        <a-modal
            v-model:visible="authVisible"
            title="角色权限管理"
            :getContainer="getPopupContainer"
            @ok="onAuthOk"
        >
            <RoleAuth v-model:menuAuth="editMenuAuth"></RoleAuth>
        </a-modal>
    </div>
</template>
<script lang='ts'>
export default { name: 'role' };
</script>
<script lang='ts' setup>
import { reactive, ref, toRefs } from 'vue';
import moment from 'moment';
import { changeFullscreenById } from '@/utils/app';
import { useI18n } from 'vue-i18n';
import { cloneDeep } from 'lodash';
import { getRoleList } from '@/api/user';
import RoleAuth from './RoleAuth.vue';
import { PlusOutlined, FullscreenExitOutlined, FullscreenOutlined, ColumnHeightOutlined, DownOutlined } from '@ant-design/icons-vue';
const { t } = useI18n();
const filterData = reactive({
    roleName: '',
    roleState: 'true',
    createTime: ''
});
class RoleClass {
    _id: string;
    name = '';
    state = false;
    remark = '';
    creatdTime = '';
    updateTime = '';
    menuAuth: string[];
    constructor(id: string) {
        this._id = id;
        this.menuAuth = [];
    }
}
/* role表格START */
const roleColumns = [
    {
        title: '序号',
        dataIndex: 'number',
        width: 90,
        slots: { customRender: 'number' },
    },
    {
        title: '角色名称',
        dataIndex: 'name',
        ellipsis: true,
    },
    {
        title: '状态',
        dataIndex: 'state',
        width: 120,
        slots: { customRender: 'state' },
        align: 'center'
    },
    {
        title: '创建时间',
        dataIndex: 'creatdTime',
        width: 180
    },
    {
        title: '修改时间',
        dataIndex: 'updateTime',
        width: 180
    },
    {
        title: '备注',
        dataIndex: 'remark',
        ellipsis: true,
    },
    {
        key: "operation",
        title: '操作',
        slots: { customRender: 'operation' },
        width: 120,
        fixed: 'right',
        align: 'center'
    },
];
const roleList = ref<RoleClass[]>([]);
const roleTableLoading = ref(true);
const onGetRoleList = async () => {
    roleTableLoading.value = true;
    roleList.value = await getRoleList();
    setTimeout(() => {
        roleTableLoading.value = false;
    }, 600);
};
onGetRoleList();
type RoleTableSize = 'default' | 'middle' | 'small';
const roleTableSize = ref<RoleTableSize>('default');
const changeRoleTableSize = ({ key }: { key: RoleTableSize; }) => { roleTableSize.value = key; };
/* role表格END */

let activeRoleIndex = -1;
/* 添加/编辑角色START */
const roleFormRef = ref();
const editRole = reactive({
    roleDrawerTitle: '添加角色',
    roleDrawerVisible: false,
    roleParams: new RoleClass('999')
});
const { roleDrawerTitle, roleDrawerVisible, roleParams } = toRefs(editRole);
const onNewRole = () => {
    roleDrawerTitle.value = '添加角色';
    editRole.roleParams = new RoleClass(roleList.value.length + '1');
    editRole.roleDrawerVisible = true;
};
const onEditRole = (row: RoleClass, index: number) => {
    activeRoleIndex = index;
    roleDrawerTitle.value = '编辑角色';
    roleParams.value = cloneDeep(row);
    editRole.roleDrawerVisible = true;
};
const onSaveRole = () => {
    roleFormRef.value
        .validate().then(() => {
            if (roleDrawerTitle.value === '添加角色') {
                const newRole = roleParams.value;
                newRole.creatdTime = moment().format('YYYY-MM-DD hh:mm:ss');
                newRole.updateTime = moment().format('YYYY-MM-DD hh:mm:ss');
                roleList.value.push(newRole);
            } else {
                roleList.value[activeRoleIndex].name = roleParams.value.name;
                roleList.value[activeRoleIndex].remark = roleParams.value.remark;
                roleList.value[activeRoleIndex].state = roleParams.value.state;
                roleList.value[activeRoleIndex].updateTime = moment().format('YYYY-MM-DD hh:mm:ss');
            }
            roleDrawerVisible.value = false;
        });
};
/* 添加/编辑角色END */

/* 授权 */
const authVisible = ref(false);
let editMenuAuth = ref<string[]>([]);
const onAuth = (row: any, index: number) => {
    activeRoleIndex = index;
    editMenuAuth.value = cloneDeep(row).menuAuth;
    authVisible.value = true;
};
const onAuthOk = () => {
    roleList.value[activeRoleIndex].menuAuth = editMenuAuth.value;
    authVisible.value = false;
};
/* 全屏START */
const isFullscreen = ref(false);
const onChangeFullscreen = () => {
    isFullscreen.value = !isFullscreen.value;
    changeFullscreenById(isFullscreen.value, 'role-table', () => { isFullscreen.value = false; });
};
const getPopupContainer = () => {
    return document.getElementById('role-table');
};
/* 全屏END */
</script>
<style lang='less' scoped>
#role {
    .table-tool {
        font-size: 1.3em;
    }
    &:deep(.ant-modal-body) {
        padding-top: 0;
    }
}
</style>